<template>
  <div class="container">
    <div class="top">
      <Blocklayout>
        <template #left>
          <MonacoDditor v-model="text1" height="38vh" language="text" />
        </template>

        <template #menu>
          <CommonMenu :menuConfig="menuConfig" v-model="pyConfig" />
        </template>

        <template #right>
          <MonacoDditor v-model="text2" height="38vh" language="text" />
        </template>
      </Blocklayout>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, watch } from "vue";
// https://www.npmjs.com/package/pinyin-pro
import { pinyin } from "pinyin-pro";

import menuConfig from "./menuConfig";

const pyConfig = reactive<{
  type: string;
  // toneType: "symbol" | "none";
  toneType: boolean;
  showOriginText: boolean;
  simp: boolean;
}>({
  type: "string",
  toneType: false,
  showOriginText: true,
  simp: true
});

const text1 = ref("");
const text2 = ref("");

watch(text1, val => handle(val));
watch(
  () => pyConfig,
  () => {
    handle(text1.value);
  },
  { deep: true }
);

const handle = (val?: string) => {
  if (val) {
    try {
      if (pyConfig.showOriginText) {
        text2.value = transition(val);
      } else {
        text2.value = zw2py(val);
      }
    } catch (err) {
      console.log("err: ", err);
    }
  }
};

/** 中文转拼音 */
const zw2py = (msg: string) => {
  const pyMsg = pinyin(msg, {
    ...pyConfig,
    toneType: pyConfig.toneType ? "symbol" : "none"
  } as any);
  return pyMsg
    .split(" ")
    .map(e => (pyConfig.simp ? e.charAt(0) : e))
    .join("");
};

const transition = (str: string) => {
  return str.trim().replace(/(.+)/g, e => {
    return `${e} -> ${zw2py(e)}`;
  });
};
</script>

<style lang="scss" scoped>
@import "@/styles/var.scss";

.vue-diff-theme-github {
  @import "highlight.js/scss/github.scss";
  background-color: #ccc;
}

.container {
  .top {
    margin-bottom: 10px;
    .btns {
      margin-top: 10px;
      text-align: center;
    }

    .menu {
      .menu-item {
        margin: 4px;
        .title {
          flex: 1;
          font-size: 12px;
        }
        .config {
          flex: 1;
          text-align: center;
        }
      }
    }
    :deep(.left),
    :deep(.right) {
      overflow-x: hidden;
    }
  }
}
</style>
